<template>
  <div class="ALLFrom" :style="imgStyle1">
    <div class="head"></div>
    <div class="FirstindexForm">
      <div class="Firstindexcontents">
        <div class="tac1">
          <form-row class="tac">
            <h3 @click="goBack">🔙</h3>
            <form-col>
              <form-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#eee"
              >
                <form-submenu index="1">
                  <template slot="title">
                    <i class="el-icon-s-comment"></i>
                    <span>消息中心</span>
                  </template>
                  <form-menuItemGroup>
                    <form-MenuItem index="1-1" @click="Allinformation()"
                      >全部消息</form-MenuItem
                    >
                    <form-MenuItem index="1-2" @click="readingformation()"
                      >未读消息</form-MenuItem
                    >
                    <form-MenuItem index="1-3" @click="readedformation()"
                      >已读消息</form-MenuItem
                    >
                  </form-menuItemGroup>
                </form-submenu>
              </form-menu>
            </form-col>
          </form-row>
          <div class="tac1-imgs" :style="imgStyle"></div>
        </div>
        <div class="tac2">
          <div class="tac2-all">
            <span>{{ all }}</span>
            <form-input
              placeholder="请输入内容"
              v-model.number="searchValue"
              clearable
            >
            </form-input>
          </div>
          <div class="tac2-text">
            <ul>
              <li
                v-for="(item, index) in informdatas"
                :key="index"
                @click="Lookinginform(item)"
              >
                <i class="el-icon-message"></i
                ><span
                  class="read"
                  :class="item.status === '0' ? '' : 'reading'"
                  v-text="
                    item.status == '0'
                      ? '未读'
                      : item.status == '1'
                      ? '已读'
                      : ''
                  "
                ></span>
                <i
                  class="el-icon-s-custom"
                  style="color: pink; margin-right: 15px"
                ></i>
                {{ item.managerName }}
                <span class="time">
                  <i class="el-icon-time"></i>
                  {{ item.date }}</span
                >
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 通知组件弹框 -->
    <div class="Background" v-show="visible">
      <inform :visible.sync="visible" :item="item"></inform>
    </div>
  </div>
</template>

<script>
import inform from "./inform.vue";
export default {
  components: { inform },
  name: "FirstindexForm",
  inject: ["reload"],
  data() {
    return {
      imgStyle: {
        backgroundImage: `url(${require("@/assets/images/3.gif")})`,
      },
      imgStyle1: {
        backgroundImage: `url(${require("@/assets/images/bgc.png")})`,
      },
      informdatas: [],
      informdata: [],
      visible: "",
      item: "",
      searchValue: "",
      all: "全部消息",
    };
  },
  watch: {
    searchValue: {
      handler(NEW, OLD) {
        if (NEW) {
          console.log(NEW);
          let arr = [];
          this.informdata.filter((index) => {
            if (
              index.managerName.indexOf(this.searchValue) >= 0 ||
              index.date.indexOf(this.searchValue) >= 0
            ) {
              arr.push(index);
            }

            return (this.informdatas = arr);
          });
        } else {
          this.informdatas = this.informdata;
        }
      },
    },
  },
  methods: {
    goBack() {
      this.$router.push({
        name: "UHomePage",
      });
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    //排序
    compare(property) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
      };
    },
    projectSort() {
      this.informdatas.sort(this.compare("status"));
    },
    //查看全部消息
    Allinformation() {
      this.all = "全部消息";
      this.informdatas = this.informdata;
    },
    //查看未读消息
    readingformation() {
      this.all = "未读消息";
      let arr = this.informdata;
      let Arry = [];
      arr.forEach((item, index) => {
        if (item.status === "0") {
          Arry.push(item);
        }
      });
      this.informdatas = Arry;
    },
    //查看已读消息
    readedformation() {
      this.all = "已读消息";
      let arr = this.informdata;
      let Arry = [];
      arr.forEach((item, index) => {
        if (item.status === "1") {
          Arry.push(item);
        }
      });
      this.informdatas = Arry;
    },
    //查看详情
    Lookinginform(item) {
      this.item = item;
      this.visible = true;
      let id = this.$store.state.LoginData.userformation[0].id;
      if ((item.status = "0")) {
        this.$http({
          method: "post",
          url: `user/updateMessageStatus?id=${id}&newsId=${item.newsId}`,
        }).then(({ data }) => {
          if (data.flag) {
          } else {
            console.log(data);
          }
        });
      }
    },
    //查看所有的通知
    AllForm() {
      let id = this.$store.state.LoginData.userformation[0].id;
      this.$http({
        method: "post",
        url: `user/getMessage?id=${id}`,
      }).then(({ data }) => {
        if (data.flag) {
          this.informdatas = data.data;
          this.informdata = data.data;
          this.projectSort();
        } else {
          console.log(data);
        }
      });
    },
  },
  mounted() {
    this.Allinformation();
    this.AllForm();
  },
};
</script>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.el-submenu .el-menu-item {
  height: 50px;
  line-height: 50px;
  padding: 0 45px;
  min-width: 150px;
}
.ALLFrom::-webkit-scrollbar {
  display: none;
}
.ALLFrom {
  display: flex;
  flex-direction: column;
  overflow: auto;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .head {
    height: 5px;
  }
  .FirstindexForm {
    flex: 1;
    .Firstindexcontents {
      display: flex;
      .tac1 {
        cursor: pointer;
        position: relative;
        width: 12%;
        margin-right: 10px;
        overflow: hidden;
        padding: 0 10px;
        .tac1-imgs {
          position: fixed;
          left: 0;
          bottom: 0;
          height: 220px;
          width: 180px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }
      .tac2 {
        right: 0;
        width: 88%;
        padding: 10px 10px 0 10px;
        .tac2-all {
          margin-bottom: 20px;
          position: relative;
          /deep/ .el-input {
            position: absolute;
            top: 0;
            right: 35px;
            font-size: 14px;
            display: inline-block;
            width: 23%;
          }
        }
        .tac2-text {
          height: 700px;
          ul {
            cursor: pointer;
            li {
              position: relative;
              margin-bottom: 10px;
              padding: 10px;
              background-color: rgb(252, 245, 233);
              .read {
                margin: 0 20px;
              }
              .time {
                position: absolute;
                top: 15px;
                font-size: 14px;
                right: 30px;
                i {
                  margin-right: 10px;
                }
              }
            }
          }
        }
      }
    }
  }
}
.reading {
  color: #ccc;
}
.Background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 98;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>